<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="860px"
    class="dialog"
    title="升级会员"
  >
    <el-row class="memberRow">
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="5">会员卡名称</el-col>
      <el-col :span="4">会员卡等级</el-col>
      <el-col :span="4">开卡方式</el-col>
      <el-col :span="5">会员卡号</el-col>
      <el-col :span="5">有效期</el-col>
    </el-row>
    <el-row
      v-for="item in memberInfo.memberInnerListVos"
      :key="item.memberNumber"
      class="memberRow"
    >
      <el-col :span="1"
        ><el-radio
          v-model="activeMemberNumber"
          @change="selectChange(item)"
          :label="item.memberNumber"
        ></el-radio
      ></el-col>
      <el-col :span="5">{{ item.title }}</el-col>
      <el-col :span="4">{{ item.rankName }}</el-col>
      <el-col :span="4">{{ radioMap[item.openType] }}</el-col>
      <el-col :span="5">{{ item.memberNumber }}</el-col>
      <el-col :span="5">{{ item.memberExpireTime }}</el-col>
    </el-row>
    <!-- <div class="notes">注：不可升级会员卡为往期会员卡</div> -->

    <!-- <div>
      <div
        :style="
          `background: url(${item.backGroundPicUrl}); background-size: 100% 100%;`
        "
        v-for="item in rankLists"
        :key="item.id"
        @click="activeMember = item"
        :class="[
          activeMember.rankCode === item.rankCode
            ? 'iMember sMember'
            : 'iMember',
        ]"
      >
        <span class="iMember__name">{{ item.rankName }}</span>
        <br />
        <span class="iMember__info">{{ item.introduce }}</span>
        <span v-if="item.openType == 1" class="iMember__price">
          ¥{{ item.openValue }}
        </span>
        <span v-if="item.openType == 2" class="iMember__price">
          {{ item.openValue }}积分
        </span>
        <i class="el-icon-success"></i>
      </div>
      <br clear="all" />
    </div> -->
    <div class="Umember">
      升级等级：<el-radio
        v-for="item in rankLists"
        :key="item.id"
        v-model="upgradeRank"
        @change="selectUpChange(item)"
        :label="item.rankCode"
        >{{ item.rankName }}</el-radio
      >
      <span
        v-if="rankLists.length === 0 && activeMemberNumber != ''"
        class="Umember__tip"
      >
        当前选中的会员卡已经是最高等级
      </span>
    </div>
    <div
      class="Umember"
      v-if="
        selectUpMember &&
          (selectUpMember.openType == 1 || selectUpMember.openType == 2)
      "
    >
      支付：{{ selectUpMember.openType == 1 ? "¥" : ""
      }}{{ selectUpMember.actualOpenValue
      }}{{ selectUpMember.openType == 2 ? "积分" : "" }}
    </div>
    <span slot="footer" class="dialog--footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { updateRank, getMemberCardUpgrade } from "@/api/customer/member";

@Component
export default class UpgradeMember extends Vue {
  dialogVisible = false;

  // 会员信息
  memberInfo: any = {};

  // 暂存所有会员等级列表
  allRankLists: any[] = [];

  // 会员等级列表
  rankLists: any[] = [];

  // 选中的会员
  activeMember: any = {};

  // 选中的会员卡号
  activeMemberNumber: number = null;

  // 升级后的等级
  upgradeRank = "";

  // 开卡方式MAP
  radioMap = {
    1: "付费购买",
    2: "积分兑换",
    3: "累计消费金额",
    4: "购买指定商品",
  };

  selectUpMember = null;

  init(memberInfo) {
    this.memberInfo = memberInfo;
    this.activeMember = memberInfo;
    this.dialogVisible = true;
    this.selectChange(memberInfo.memberInnerListVos[0]);
  }

  // 需要升级的会员卡选择
  selectChange(memberInfo) {
    this.upgradeRank = "";
    this.selectUpMember = null;
    getMemberCardUpgrade({ memberId: memberInfo.id }).then(res => {
      const data: any = res.data;
      this.allRankLists = (data.memberCardInfoCenterVos || []).filter(
        v => v.isOpen == 1,
      );
      this.rankLists = [
        ...this.allRankLists.filter(v => v.rankCode > memberInfo.rankCode),
      ];
    });
  }

  // 升级后会员卡选择
  selectUpChange(memberInfo) {
    this.selectUpMember = memberInfo;
  }

  @Watch("dialogVisible")
  handelVisibelChange() {
    this.upgradeRank = "";
    this.selectUpMember = null;
  }

  // 升级会员确认
  onOk() {
    if (!this.activeMemberNumber) {
      this.$message({
        type: "error",
        message: "请先选择需要升级的会员卡",
      });
      return false;
    }
    if (!this.upgradeRank) {
      this.$message({
        type: "error",
        message: "请选择需要升级等级",
      });
      return false;
    }
    const updateMember = this.rankLists.find(
      v => v.rankCode == this.upgradeRank,
    );
    updateRank({
      memberNumber: this.activeMemberNumber,
      rankCode: this.upgradeRank,
      rankName: updateMember.rankName,
    }).then(res => {
      console.log(res)
      this.$message({
        type: "success",
        message: "升级成功",
      });
      this.dialogVisible = false;
      this.$emit("refreshDataList",1);
      this.upgradeRank = "";
      this.selectUpMember = null;
    });
  }
}
</script>

<style scoped lang="scss">
@include b(memberRow) {
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.23);
  &:last-child {
    border-top: none;
  }
  /deep/ .el-radio__label {
    display: none;
  }
}
@include b(notes) {
  color: #999;
  text-align: right;
  margin: 20px 0;
}
@include b(iMember) {
  width: 240px;
  height: 140px;
  float: left;
  // background: #bbb;
  position: relative;
  cursor: pointer;
  padding: 20px 12px;
  margin: 24px;
  line-height: 30px;
  @include e(name) {
    color: #fff;
    font-size: 24px;
  }
  @include e(info) {
    color: #fff;
    font-size: 14px;
  }
  @include e(price) {
    position: absolute;
    display: block;
    width: 80px;
    border-radius: 40px;
    box-shadow: -2px 2px 2px #888888;
    left: 12px;
    bottom: 20px;
    color: #fff;
    text-align: center;
    background: #aaa;
  }
  > i {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #999;
  }
}
@include b(sMember) {
  > i {
    font-size: 24px;
    color: #409eff !important;
  }
}

@include b(Umember) {
  margin-top: 20px;
  @include e(tip) {
    color: #aaa;
    font-size: 12px;
  }
}

/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
</style>
